<!-- components/Calendar.vue -->
<template>
  <div class="calendar-container">
    <h3>课程日历</h3>

    <!-- 调试信息 -->
    <div style="margin-bottom: 10px; background: #f5f5f5; padding: 10px;">
      <p>Store 中课程数量: {{ storeCourses.length }}</p>
      <p>当前选中日期: {{ selectedDate }}</p>
      <p>格式化日期: {{ formatDate(selectedDate) }}</p>
      <p>选中日期课程数: {{ selectedCourses.length }}</p>
    </div>

    <!-- Element Plus 日历 -->
    <el-calendar v-model="selectedDate">
      <!-- 自定义日期单元格 -->
      <template #dateCell="{ date }">
        <div class="custom-date-cell">
          <!-- 显示日期 -->
          <span class="day">{{ getDay(date) }}</span>
          <!-- 显示课程标记 -->
          <div v-if="hasCourses(date)" class="course-marker">
            {{ getCoursesByDate(date).length }} 门
          </div>
        </div>
      </template>
    </el-calendar>

    <!-- 显示选中日期的课程 -->
    <div v-if="selectedCourses.length > 0" class="course-list">
      <h4>{{ selectedDateFormatted }} 的课程安排</h4>
      <el-card v-for="course in selectedCourses" :key="course.id" shadow="hover" class="course-item">
        <div class="course-info">
          <span class="title">{{ course.name }}</span>
          <span class="time">{{ course.startTime ? course.startTime.split(' ')[1] : '' }}</span>
        </div>
      </el-card>
    </div>

    <!-- 如果没有课程也显示提示 -->
    <div v-else class="course-list">
      <h4>{{ selectedDateFormatted }} 的课程安排</h4>
      <p>当天没有安排课程</p>
    </div>
  </div>
</template>


<script setup>
import { computed, ref, watch } from "vue";
import { useCourseStore } from '@/store/index.js';

// 使用 store
const courseStore = useCourseStore();

// 从 store 中获取课程数据
const storeCourses = computed(() => courseStore.courses);

// 当前选中的日期
const selectedDate = ref(new Date());

// 监听 selectedDate 的变化，确保在日期变化时触发更新
watch(selectedDate, (newDate) => {
  // 这里可以添加任何需要在日期变化时执行的逻辑
  console.log('Selected date changed to:', newDate);
});



// 获取日期中的"日"
const getDay = (date) => {
  return date.getDate();
};

// 判断某天是否有课程
const hasCourses = (date) => {
  return getCoursesByDate(date).length > 0;
};
// 如果 startTime 格式不统一，可以手动处理
const normalizeDate = (dateStr) => {
  const [datePart, timePart] = dateStr.split(' ');
  const [year, month, day] = datePart.split('-');
  const [hour, minute, second] = timePart.split(':');
  return new Date(year, month - 1, day, hour, minute, second);
};

const getCoursesByDate = (date) => {
  const targetDate = new Date(date);
  targetDate.setHours(0, 0, 0, 0);

  const result = storeCourses.value.filter(course => {
    if (course.startTime) {
      const courseDate = normalizeDate(course.startTime);
      courseDate.setHours(0, 0, 0, 0);
      return courseDate.getTime() === targetDate.getTime();
    }
    return false;
  });

  console.log('检查日期:', targetDate.toISOString().split('T')[0]);
  console.log('找到的课程:', result);
  return result;
};


// 格式化日期为 YYYY-MM-DD
const formatDate = (date) => {
  const d = new Date(date);
  const year = d.getFullYear();
  const month = String(d.getMonth() + 1).padStart(2, '0');
  const day = String(d.getDate()).padStart(2, '0');
  const result = `${year}-${month}-${day}`;
  console.log('格式化日期:', date, '->', result);
  return result;
};

// 计算当前选中日期的课程
const selectedCourses = computed(() => {
  return getCoursesByDate(selectedDate.value);
});

// 格式化选中日期显示
const selectedDateFormatted = computed(() => {
  return selectedDate.value.toLocaleDateString("zh-CN", {
    year: "numeric",
    month: "long",
    day: "numeric"
  });
});
</script>


<style scoped>
.calendar-container {
  padding: 20px;
  font-family: Arial, sans-serif;
}

.custom-date-cell {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4px;
}

.course-marker {
  margin-top: 4px;
  font-size: 12px;
  color: #409eff;
  background: #ecf5ff;
  border-radius: 3px;
  padding: 1px 4px;
}

.course-list {
  margin-top: 20px;
}

.course-item {
  margin-bottom: 10px;
}

.course-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-weight: 600;
  color: #333;
}

.time {
  color: #666;
  font-size: 14px;
}
</style>
